<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>订单管理（超级管理）</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <div class="whole-flex-center-between whole-top-handle">
                <div class="">
                    <el-button size="small" @click="clearFilter" style="margin-right:20px">重置所有筛选</el-button>
                    <el-select size="small" v-model="searchForm.status" style="margin-right:5px" placeholder="选择订单状态">
                        <el-option label="待支付" :value="0"></el-option>
                        <el-option label="已支付" :value="1"></el-option>
                        <el-option label="已退款" :value="2"></el-option>
                    </el-select>
                    <el-input class="input-w" size="small" v-model="searchForm.agentID" placeholder="代理id" clearable></el-input>
                    <el-input class="input-w" size="small" v-model="searchForm.userID" placeholder="商户id" clearable></el-input>
                    <el-input class="input-w" size="small" v-model="searchForm.orderNo" placeholder="系统订单号" clearable></el-input>
                    <el-input class="input-w" size="small" v-model="searchForm.externalOrderNo" placeholder="外部订单号" clearable></el-input>
                    <el-input class="input-w" size="small" v-model="searchForm.channelOrderNo" placeholder="渠道订单号" clearable></el-input>
                    <el-input class="input-w" size="small" v-model="searchForm.payType" placeholder="渠道信息" clearable></el-input>
                    <el-select size="small" v-model="searchForm.orderType" style="margin-right:5px" placeholder="选择渠道信息状态">
                        <el-option label="成功" :value="1"></el-option>
                        <el-option label="全部" :value="0"></el-option>
                    </el-select>
                    <el-date-picker v-model="searchForm.time" value-format="timestamp" size="small" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
                    </el-date-picker>
                    <el-button size="small" @click="getList(1,searchForm)">查询</el-button>
                </div>
            </div>
            <div class="whole-flow-table-box">
                <el-table ref="myTable" :data="list" border stripe>
                    <el-table-column type="expand">
                        <template slot-scope="props">
                            <el-form label-position="left" inline class="shrink-box">
                                <el-form-item label="订单ID">
                                    <span>{{ props.row.order_id }}</span>
                                </el-form-item>
                                <el-form-item label="商户名称">
                                    <span>{{ props.row.user_name }}</span>
                                </el-form-item>
                                <el-form-item label="代理商名称">
                                    <span>{{ props.row.agentName }}</span>
                                </el-form-item>
                                <el-form-item label="商户ID">
                                    <span>{{ props.row.user_id }}</span>
                                </el-form-item>
                                <el-form-item label="订单名称">
                                    <span>{{ props.row.body }}</span>
                                </el-form-item>
                                <el-form-item label="系统订单号">
                                    <span>{{ props.row.order_no }}</span>
                                </el-form-item>
                                <el-form-item label="外部订单号">
                                    <span>{{ props.row.external_order_no }}</span>
                                </el-form-item>
                                <el-form-item label="渠道订单号">
                                    <span>{{ props.row.channel_order_no }}</span>
                                </el-form-item>
                                <el-form-item label="支付类型">
                                    <span>{{ props.row.pay_type }}</span>
                                </el-form-item>
                                <el-form-item label="应付金额">
                                    <span>{{ props.row.total_amount }}</span>
                                </el-form-item>
                                <el-form-item label="优惠金额">
                                    <span>{{ props.row.discountable_amount }}</span>
                                </el-form-item>
                                <el-form-item label="支付金额">
                                    <span>{{ props.row.pay_amount }}</span>
                                </el-form-item>
                                <el-form-item label="优惠金额">
                                    <span>{{ props.row.pay_amount }}</span>
                                </el-form-item>
                                <el-form-item label="退款金额">
                                    <span>{{ props.row.refund_money }}</span>
                                </el-form-item>
                                <el-form-item label="订单状态">
                                    <span v-if="props.row.status === 0">待支付</span>
                                    <span v-else-if="props.row.status === 1">已支付</span>
                                    <span v-else-if="props.row.status === 2">已退款</span>
                                </el-form-item>
                                <el-form-item label="订单备注">
                                    <span>{{ props.row.note }}</span>
                                </el-form-item>
                                <el-form-item label="支付时间">
                                    <span>{{ props.row.pay_time }}</span>
                                </el-form-item>
                                <el-form-item label="添加时间">
                                    <span>{{ props.row.create_time }}</span>
                                </el-form-item>
                                <el-form-item label="更新时间">
                                    <span>{{ props.row.update_time }}</span>
                                </el-form-item>
                            </el-form>
                        </template>
                    </el-table-column>
                    <el-table-column sortable align="center" prop="order_id" label="订单ID" width="100"></el-table-column>
                    <el-table-column align="center" prop="body" label="订单名称"></el-table-column>
                    <el-table-column align="center" prop="user_name" label="商户名称"></el-table-column>
                    <el-table-column sortable align="center" prop="pay_type" label="支付类型"></el-table-column>
                    <el-table-column align="center" prop="pay_amount" label="支付金额"></el-table-column>
                    <el-table-column align="center" prop="status" label="订单状态">
                        <template slot-scope="scope">
                            <span v-if="scope.row.status === 0">未支付</span>
                            <span v-else-if="scope.row.status === 1">已支付</span>
                            <span v-else-if="scope.row.status === 2">已退款</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="操作">
                        <template slot-scope="scope">
                            <el-button size="mini" @click="aa(scope.row)">按钮</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="whole-pagination">
                <el-pagination background layout="prev, pager, next" :page-size="size" :total="count" @current-change="currentPage"></el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            count: 0,
            size: 10,
            list: [],
            // 搜索表单
            searchForm: {},
            expands: [],
        };
    },
    methods: {
        clearFilter() {
            this.$refs.myTable.clearFilter();
            this.getList(1, {});
            this.searchForm = {};
        },

        // 获取订单列表
        getList(page, form) {
            let _this = this;
            this.$axios({
                url: "/admin/general/getUserOrder",
                data: {
                    offset: page,
                    limit: _this.size,
                    agentID:form.agentID?form.agentID:'',    
                    userID:form.userID?form.userID:'',
                    status:form.status?form.status:'',
                    orderNo:form.orderNo?form.orderNo:'',
                    externalOrderNo:form.externalOrderNo?form.externalOrderNo:'',
                    channelOrderNo:form.channelOrderNo?form.channelOrderNo:'',
                    payType:form.payType?form.payType:'',
                    orderType:form.orderType?form.orderType:'',
                    startTime:form.time?form.time[0]/1000:'',
                    endTime:form.time?form.time[1]/1000:''
                },
                success(res) {
                    if (res.data.code == 200) {
                        _this.list = res.data.content.data;
                        _this.count = res.data.content.count;
                    } else {
                        _this.$message({
                            message: res.data.msg,
                            type: "warning",
                        });
                    }
                },
            });
        },
        currentPage(page) {
            let _this = this;
            let form=this.searchForm;
            _this.getList(page, form);
        },
    },
    created() {
        this.getList(1,{});
    },
};
</script>


<style scoped>
.input-w {
    width: 200px;
    margin: 0 5px 5px 0;
}
.shrink-box {
    width: 100%;
    font-size: 0;
}
.shrink-box >>> label {
    width: 100px;
    color: #99a9bf;
}
.shrink-box .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 33.333333%;
}
.title-center {
    width: 100%;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
    color: black;
    font-weight: 700;
}
.img-box {
    width: 80px;
    height: 80px;
    margin: 0 auto;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
</style>
